<!DOCTYPE html>
<html>
<head>
	<title>Quiz Designer</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/gameByDesign.css" />
	<link rel="stylesheet" href="styles/jquery.mobile-1.3.1.min.css" />
	<script src="scripts/jquery-2.0.2.min.js"></script>
	<script src="scripts/jquery.mobile-1.3.1.min.js"></script>
	<script src="scripts/utils.js"></script>
	<script src="scripts/quiz_designer.js"></script>
	<script src="scripts/my_games.js"></script>
</head>
<body>

<!-- /header -->
		<h1><img src="images/logo.png" style="width:30%;" alt="logo"></h1>

<div data-role="page">

<div id="wrapper">

<!-- /page header -->
		<h1><img src="images/logo.png" style="width:30%;" alt="logo"></h1>
<h2>Design your quiz</h2>
	<div data-role="header">
	
		<h1>Quiz Designer</h1>
	</div><!-- /header -->

	<div data-role="content" style="width:100%;">

		
		<h3>Step 1: Describe your game</h3>
		<label for="gameTitle">Game Title</label>
		<input type="text" id="gameTitle" data-mini="true" />
		<label for="gameDescription">Description</label>
		<input type="text" id="gameDescription" data-mini="true"/>
      
        
		<div id="questionBox" style="margin-left:0; width:50%;">
		<h3>Step 2: Setup your questions</h3>
		<label for="fieldQuestion">Question 1</label>
		<input class="designQuestion" type="text" id="fieldQuestion" data-mini="true" />
		<label for="fieldAnswer">True</label>
		<input class="designAnswer" type="radio" id="fieldAnswer" data-mini="true" style="width:200px;"/>
		<hr/>
		<label for="fieldQuestion">Question 2</label>
		<input class="designQuestion" type="text" id="fieldQuestion" data-mini="true" />
		<label for="fieldAnswer">True</label>
		<input class="designAnswer" type="radio" id="fieldAnswer" data-mini="true" />
		<hr/>
		<label for="fieldQuestion">Question 3</label>
		<input class="designQuestion" type="text" id="fieldQuestion" data-mini="true" />
		<label for="fieldAnswer">True</label>
		<input class="designAnswer" type="radio" id="fieldAnswer" data-mini="true" />
		<hr/>
		<label for="fieldQuestion">Question 4</label>
		<input class="designQuestion" type="text" id="fieldQuestion" data-mini="true" />
		<label for="fieldAnswer">True</label>
		<input class="designAnswer" type="radio" id="fieldAnswer" data-mini="true" />
		<hr/>
		<label for="fieldQuestion">Question 5</label>
		<input class="designQuestion" type="text" id="fieldQuestion" data-mini="true" />
		<label for="fieldAnswer">True</label>
		<input class="designAnswer" type="radio" id="fieldAnswer" data-mini="true" />
		<hr/>
        </div>
		<h3>Step 3: Publish your game!</h3>
		<a id="designSave" data-role="button" style="width:20%;">Save</a>
		<a id="playthegamenow" data-role="button" href="play_game.html" style="width:20%;">Play</a>
        <a id="designSaveReturn" data-role="button" href="my_games.html" style="width:40%;">Save and Return to My Games</a>
        
	</div><!-- /content -->

	<div data-role="footer">
		<h4><a href="../game-by-design/my_profile.html" style="text-decoration:none;">My Profile</a></h4>
	</div><!-- /footer -->
<div id="footer">eduHack 2013</div>
</div>
</div><!-- /page -->

</div>
</body>
</html>